<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
<div class="release_title">
	<a href="#" class="tc_close close_btn">关闭</a>
	<p>上传图片</p>
</div>
<div class="content clearfix">
	<div class="t_pd_s1">
		<div class="upload_det_box">
			<form id="upload_img_form" action="uploadPicImg.htm" method="POST"
				enctype="multipart/form-data">
				<input type="file" class="up_file btn_upload"
					onchange="doingUploadImgNew();" name="fileImage" id="imageBut" /> <input
					type="button" class="def_btn_s9 " value="上传图片" />
				<p class="info">
					每次最多允许上传5张照片<br /> 支持GIF/JPG/PNG，单张图片最大4M
				</p>
				<div class="clear"></div>
			</form>

		</div>
		<div class="load_pic_box" id="pic_list"></div>
		<!-- add_title -->
		<div class="l_add_tit">
			<div class="wb_add_l">
				<h3>
					<span>不超过20字</span>标题：<i class="tip">为这组图片添加一个标题</i>
				</h3>
				<input type="text" class="def_text_1 focus"  id="saveFiveDoing" />
			</div>
			<input type="button" class="def_btn_s12" value="保 存"
				onclick="saveFiveDoing();" />
		</div>
		<!-- add_title--end-->

	</div>

</div>

<script type="text/javascript">
	var picImgList = new ArrayList();	
	function doingUploadImgNew() {
		var filepath = $("#imageBut").val();
		//alert(filepath);
		var extStart = filepath.lastIndexOf(".");
		var ext = filepath.substring(extStart, filepath.length).toUpperCase();
		if (ext != ".PNG" && ext != ".JPG" && ext != ".JPEG" && ext != ".GIF") {
			alert("图片限于png,jpeg,jpg,gif格式");
			return false;
		}
		$("#upload_img_form").ajaxSubmit({
			dataType : 'json',
			cache : false,
			success : function(data) {
				//alert(data); 
				addDoingPic(data);
			},
			error : function(err) {
				alert(err);
			}
		});
		return false;
	}
	
	function addDoingPic(data){
		var inputNum =picImgList.size();
		//alert(inputNum);
		if(picImgList.size() < 5){
			var divHtml ='<div class=" l_pic_item">'
						+'<div class="l_pic">'
						+'<img srcimg="'+data.imageServer+data.thumbnail+'" srcwidth="'+data.width200xxx+'"  srcheight="'+data.height200xxx+'" src="'+data.imageServer+data.thumbnail+'_100x100.jpg" class="block" style="width: 58px;"height="58px;" id="image'+inputNum+'"/>'
						+'<a href="javascript:;" onclick="delDoingImg(this)"  class="close_pic"></a></div>'
						+'<input type="text" class="def_text_1 focus" value="图片简述" id="text'+inputNum+'" /><div class="clear"></div></div>'
			$("#pic_list").append(divHtml);
			picImgList.add(data);
		}else{
			alert("最多只能发五张图片");
		}
		
	}
	function delDoingImg(obj){
		$(obj).parent().parent().remove();
		var picNumber = picImgList.size();
		var delCount = -1;
		for(var i = 0; i < picNumber; i++){
			var picUrl = $(obj).parent().find(".block").attr("srcimg");
			var doingImg = picImgList.get(i);
			if((doingImg.imageServer+doingImg.thumbnail+"_100x100.jpg") == picUrl){
				delCount = i;
			}
		}
		if(delCount != -1){
			picImgList.remove(delCount);
		}
	}
	function saveFiveDoing(){
		
		var doingList =new Array();
/* 
		for(var i = 0; i <picImgList.size(); i++){
			var image = $("#image"+i).attr("src"),
			var text =	$("#text"+i).val(),
			doingList.push(image,text);
		}  */
		$("#pic_list .l_pic_item").each(
			function(){
				var image = $(this).find("img").attr("srcimg");
				var width200xxx  =	$(this).find("img").attr("srcwidth");
				var height200xxx = $(this).find("img").attr("srcheight");
				var content = $(this).find("input").val();
				//alert(content);
				doingList.push({
					pictureThumbnail:image,
					height200xxx:height200xxx,
					width200xxx:width200xxx,
					picUrl:content
				})
			});
		
		 if(IsNull(doingList)){
			alert("请选择图片！");
			return false;
		} 
		var ptitle=$("#saveFiveDoing").val();
		if(IsNull(ptitle)){
			alert("请输入标题！");
			return false;
		} 
		$("#saveFiveDoing").attr("onclick","");
		$.post("saveFiveDoing.htm", {
			'doingList' : escape($.toJSON(doingList)),
			'theme':${theme},
			'ptitle':$("#saveFiveDoing").val()
			}, function(data) {
				alert("添加成功！");
				window.location.href="/piclshow.htm?discussId=${did}";
			});
	}
	</script>
